<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
				<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="myApp">
				<button type="button" @click="add">添加</button>
				<table>
					<thead>
						<th>姓名</th>
						<th>性别</th>
						<th>爱好</th>
						<th>民族</th>
						<th>备注</th>
						<th>操作</th>
					</thead>
					<tbody>
							<tr v-for="(x,index) in list">
								<td>{{x.name}}</td>
								<td>{{x.sex}}</td>
								<td>{{x.hoby}}</td>
								<td>{{x.mz}}</td>
								<td>{{x.remark}}</td>
								<td>
									<button type="button" @click="update(x)">修改</button>
									<button type="button" @click="updatePage(x)">修改跳转页面</button>
									<button type="button" @click="del(x,index)">删除</button>
								</td>
							</tr>
					</tbody>
				</table>
		
		<div v-show="isShow"
		   style="background-color: #FF0000; width: 500px; height: 300px;">
				<h1>{{title}}</h1>
				<span>用户：</span>
				<input type="text" v-model="user.name"/>
				<br>
				<span>性别：</span>
				<input type="radio" value="1" v-model="user.sex"/>男
				<input type="radio" value="0" v-model="user.sex"/>女
				<br>
				<span>民族：</span>
				<select v-model="user.mz">
				    <option value="0">----请选择民族-----</option>
					 <option value="汉族">汉族</option>
					 <option value="苗族">苗族</option>
					 <option value="彝族">彝族</option>
				</select>
				<br>
				<span>备注：</span>
				<!-- 文本域 -->
				<textarea  v-model="user.remark">
				</textarea>
				<br>
				
				<span>爱好：</span>
				<input type="checkbox" value="看电影" v-model="hoby" />看电影
				<input type="checkbox" value="看书" v-model="hoby"/>看书
				<input type="checkbox" value="逛街" v-model="hoby"/>逛街
				<br>
				<span>提示：{{info}}</span>
				<button type="button" @click="save">保存</button>
		</div>
		</div>
	</body>
	<script>
	     new Vue({
			  el:'#myApp',
			  data:{
				 list:[],
				 info:"",
				 isShow:false, //弹窗是否显示
				 user:{ //表单对象
				 	name:"",
				 	sex:"",
				 	mz:"",
				 	remark:"",
				 	hoby:""
	
				 },
				 hoby:[],
				 title:"修改"//弹窗标题
				 
			  },
			  methods:{
				 loadData(){//  加载数据
					 //假设ajax	请求服务端获取到数据
					 this.list =[
						 {"name":"张三","sex":1,"hoby":"看电影,逛街","mz":"汉族",'remark':"三好学生"},
						 {"name":"李四","sex":0,"hoby":"看电影,看小说","mz":"苗族",'remark':"三好学生"},
						 {"name":"王五","sex":1,"hoby":"看电影","mz":"彝族",'remark':"三好学生"},
					 ]
				 },
				  update:function(x){//弹窗式修改
					  //显示弹窗
					  this.isShow = true;
					  this.title="修改";
					  //数据回显
					  this.user = x;
					  this.hoby = this.user.hoby.split(",");
				  },
				  save:function(){ //保存
					  if(this.title=="修改"){
						  //修改ajax
					  }else{
						  //新增逻辑
						  var info = "";
						  for(var i=0;i<this.hoby.length;i++){
							  info += this.hoby[i]+",";
						  }
						  this.user.hoby = info;
						  
						  this.list.push(this.user);
						  
					  }
					  this.isShow = false;
				  },
				  del:function(x,index){//删除
					  this.list.splice(index,1);
					  //ajax
				  },
				  add:function(){
					   this.isShow = true;
					   this.title="新增";
					   //清空数据
					   this.user ={};
					   this.hoby=[];
					   
				  },
				  updatePage:function(x){//修改跳转页面
					  localStorage.setItem("user",JSON.stringify(x));
					  location.href="updatePage.html";
				  }
				  
			  },
			  mounted(){
				  this.loadData();
			  }
		 })
	</script>
</html>
